/* * @Author: 董洌淇 * @Date: 2020年12月4日14:09:59 * @Last Modified by: 董洌淇 * @Last Modified time: 2020年12月4日14:10:03 * @Description: 实时数据页面 */
<template>
	<view class="real-time-data">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">马西坊污水处理站</block>
		</cu-custom>
		<view class="padding bg-white flex flex-space-between">
			<button class="cu-btn xm" v-for="(item, index) in dateTimeChooseList" :key="index" :class="btnIndex === index ? 'bg-blue' : ''" @click="dateTimeFn(item, index)">
				{{ item.label }}
			</button>
		</view>
		<view class="time-data flex flex-space-between flex-align-items-center bg-white">
			<view @click="onShowDatePicker('startDateTime')" class="btn-style">{{ startDateTime ? startDateTime : '开始时间' }}</view>
			<view>-</view>
			<view @click="onShowDatePicker('endDateTime')" class="btn-style">{{ endDateTime ? endDateTime : '选择日期时间' }}</view>
		</view>
		<view class="bg-white margin-top-sm padding flex flex-space-between">
			<view
				class="details-box radius padding-10upx"
				@click="changeDetailsDataFn(index, item)"
				v-for="(item, index) in detailsDataList"
			    :key="index"
				:class="detailsIndex === index ? 'details-active': ''">
					<view class="text-style text-center padding-bottom-xs">{{item.name}}</view>
					<view class="text-style text-center">{{item.value}}{{item.unit}}</view>
			</view>
		</view>
		<view class="bg-white margin-top-sm padding">
			<text class="after-title font-weight-600">{{detailsDataShowList.name}}数据监测</text>
			<view class="margin-top-sm">
				<plTable :tableList="tableList" :tableHeader="tableHeader"></plTable>
			</view>
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-minutes="false" :show-seconds="false" @confirm="onSelected" @cancel="onSelected" />
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/appicon-72.png" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
import { dateTimeChoose, monitorDataHeader } from './config.js';
import { parseTimestamp } from '@/utils/methods';
import MxDatePicker from '@/components/mx-datepicker/mx-datepicker'
import plTable from '@/components/t-table'
export default {
	name: 'realTimeData',
	components: { MxDatePicker, plTable },
	data() {
		return {
			loadModal: false,
			dateTimeChooseList: dateTimeChoose,
			btnIndex: 0,
			detailsIndex: 0,
			filter: {
				// 请求条件
				timeStamp: Date.parse(new Date())
			},
			showPicker: false, // 时间选择器状态控制
			value: parseTimestamp('yyyy-MM-dd', Date.parse(new Date())), // 时间值的值
			type: '', // 时间选择器类型
			startDateTime: parseTimestamp('yyyy-MM-dd', Date.parse(new Date())), // 开始时间start
			endDateTime: parseTimestamp('yyyy-MM-dd', Date.parse(new Date())), // 结束时间
			detailsData: { // 详情数据
				cod: 43.3,
				ammoniaNitrogen: 19.23,
				phValue: 8.34,
				traffic: 0.213
			},
			detailsDataShowList: {}, // 点击告警点位
			tableHeader: monitorDataHeader, // 表头配置
			tableList: [] // // 表格数据
		};
	},
	onLoad(data) {
		console.log(data, '获取地址栏params');
	},
	computed: {
		detailsDataList () {
			return [
				{ name: 'COD', unit: 'mg/L', value: this.detailsData.cod },
				{ name: '氨氮', unit: 'mg/L', value: this.detailsData.ammoniaNitrogen },
				{ name: 'PH值', unit: '无量纲', value: this.detailsData.phValue},
				{ name: '瞬时流量', unit: 'm³/s', value: this.detailsData.traffic }
			]
		}
	},
	mounted() {
		this.getDetailsDataFn()
	},
	methods: {
		// 获取详情数据
		getDetailsDataFn () {
			console.log('获取')
			this.detailsDataShowList = this.detailsDataList[0] // 默认值
			this.getTableDataFn()
		},
		// 获取表格数据
		getTableDataFn () {
			this.loadModal = true
			this.tableList = [
				{
					id: 0,
					monitorTime: '2022-01-12',
					standardValues: '19',
					monitorData: 32
				},
				{
					id: 1,
					monitorTime: '2022-12-12',
					standardValues: 1,
					monitorData: 344
				}
			]
			setTimeout(() => {
				this.loadModal = false
			}, 3000)
		},
		// 点击详情
		changeDetailsDataFn (index, data) {
			this.detailsIndex = index
			this.detailsDataShowList = data
			console.log(index, data, '点击点位1')
		},
		// 单选按钮切换状态
		dateTimeFn(item, index) {
			this.btnIndex = index;
			console.log(item, 'index');
		},
		// 时间组件显示
		onShowDatePicker(type) {
			this.showPicker = true;
			// this.value = 'datetime'
			this.type = type;
		},
		// 选中时间
		onSelected(e) {
			this.showPicker = false;
			if (e) {
				if (this.type === 'startDateTime') {
					this.startDateTime = e.value;
				} else {
					this.endDateTime = e.value;
				}
				// //选择的值
				console.log('value => ' + e.value);
				//原始的Date对象
				console.log('date => ' + e.date);
				// this.filter.timeStamp = Date.parse(e.value),
				// this.getDataTable()
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.real-time-data {
		.after-title {
			position: relative;
			display: block;
			padding-left: 50upx;
			&::before {
				content: ' ';
				display: block;
				width: 32upx;
				height: 32upx;
				border-radius: 50%;
				position: absolute;
				background-color: #9ccdf6;
				left: 0;
				top: 2upx;
			}

			&::after {
				content: ' ';
				display: block;
				width: 22upx;
				height: 22upx;
				border-radius: 50%;
				position: absolute;
				background-color: #0081ff;
				left: 6upx;
				top: 8upx;
			}
		}
	.time-data {
		border-top: 1px solid $uni-border-color;
		.btn-style {
			display: block;
			text-align: center;
			background-color: $uni-bg-color;
			padding: 30upx;
		}
	}
	.details-active {
		border: 2upx solid #0081FF !important;
		background-color: #0081FF;
		color: #ffffff;
	}
	.details-box {
		display: block;
		border: 2upx solid #F0F0F0;
		.text-style {
			display: block;
		}
	}
}
</style>
